<template>

  <div class="dashboard">
    <div class="main-content">
      <!-- 销售趋势折线图 -->
      <div class="housing-status-pie">
        <EChart
          :option="pieOption"
          :width="width"
          :height="height"
        />
      </div>
    </div>
  </div>

</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'
import * as echarts from 'echarts'

const props = defineProps({
  // 已入住房屋数
  occupied: {
    type: Number,
    default: 0
  },
  // 空置房屋数
  vacant: {
    type: Number,
    default: 0
  },
  // 容器宽度（设计稿尺寸）
  width: {
    type: Number,
    default: 500
  },
  // 容器高度（设计稿尺寸）
  height: {
    type: Number,
    default: 400
  }
})

// 计算饼图配置
const pieOption = computed(() => {
  const total = props.occupied + props.vacant
  const occupiedPercent = total > 0 ? ((props.occupied / total) * 100).toFixed(1) : 0
  const vacantPercent = total > 0 ? ((props.vacant / total) * 100).toFixed(1) : 0

  return {
    // 标题配置
    title: {
      text: '房屋状态分布',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 0
    },

    // 提示框配置
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>数量: ${params.value}</div>
            <div>占比: ${params.percent}%</div>
          </div>
        `
      }
    },

    // 图例配置
    legend: {
      orient: 'vertical',
      right: 20,
      top: 'middle', // 或具体像素如 100
      textStyle: {
        color: '#bfbfbf',
        fontSize: 14
      },
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20
    },

    // 饼图系列配置
    series: [
      {
        type: 'pie',
        startAngle: 120, // 👈 关键：旋转角度（单位：度）
        radius: ['0%', '70%'], // 环形饼图
        center: ['45%', '45%'],
        data: [
          {
            name: '已入住',
            value: props.occupied,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#52c41a' },
                { offset: 1, color: '#73d13d' }
              ])
            }
          },
          {
            name: '空置',
            value: props.vacant,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#faad14' },
                { offset: 1, color: '#ffc53d' }
              ])
            }
          }
        ],
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}\n{d}%',
          fontSize: 14,
          fontWeight: 'bold',
          color: '#ffffff',
          lineHeight: 20
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 15,
          lineStyle: {
            width: 2,
            color: 'rgba(255, 255, 255, 0.6)'
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold',
            color: '#ffffff'
          }
        },
        // 动画配置
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200
        }
      }
    ]
  }
})
</script>

<style scoped  lang="scss">

@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;



.header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background: transparent;
  //background: rgba(162, 17, 17, 0);
  //border-bottom: 1px solid $border;
}

h1 {
  color: #e6ff00;
  font-size: 24px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.chart-item {
  @include card-style;
  //height: 500px; /* ✅ 明确设置高度 */
}
.housing-status-pie {
  width: 100%;
  height: 100%;
}
</style>
